<template>
	<view>
		<view class="box">
			<text>真实姓名</text>
			<input type="text" value="" v-model="name" placeholder="请输入真实姓名" />
		</view>
		<view class="box">
			<text>支付宝账号</text>
			<input type="text" value="" v-model="zhifub" placeholder="请绑定支付宝账号" />
		</view>
		<view class="box">
			<text>支付宝邮箱</text>
			<input style="width: 400rpx;" type="text" value="" v-model="mailbox" placeholder="请绑定支付宝邮箱" />
		</view>
		<view class="tip" @click="catPhone">
			支付宝邮箱绑定流程
		</view>
		<view class="btn">
			<view class="bt" @click="save">
				绑定
			</view>
		</view>
		<!-- <image src="http://loto.oss-cn-shanghai.aliyuncs.com/email/78ee25b6907a483f.jpg" mode="widthFix"></image> -->
	</view>
</template>

<script>
	import { findZFB,addZFB } from '@/apis/wallet/index.js'
	import {validatePhone1,validateEmail1} from '@/common/js/validate.js'
	export default {
		data() {
			return {
				name:'',
				zhifub:'',
				mailbox: ''
			}
		},
		methods: {
			catPhone(){
				uni.previewImage({
					urls:['http://loto.oss-cn-shanghai.aliyuncs.com/email/d5c7eac4a0c34477.webp']
				})
			},
			async save(){
				
				if(!this.name || !this.zhifub || !this.mailbox){
					// #ifdef APP-PLUS
					plus.nativeUI.toast('请填写全部内容再进行保存！')
					// #endif
					// #ifdef H5
					uni.showToast({
						icon:'none',
						title:'请填写全部内容再进行保存！'
					})
					// #endif
					return
				}
				
				if(!validateEmail1(this.mailbox) || !validatePhone1(this.zhifub)){
					// #ifdef APP-PLUS
					plus.nativeUI.toast('请输入正确的支付宝手机号跟邮箱！')
					// #endif
					// #ifdef H5
					uni.showToast({
						icon:'none',
						title:'请输入正确的支付宝手机号或邮箱！'
					})
					// #endif
					return
				}
				
				let data={
					name:this.name,
					zfbNumber:this.zhifub,
					mailbox: this.mailbox
				}
				let res =await addZFB(data)
				console.log(res,'添加zhangh')
				if(res.success){
					uni.showToast({
						icon:'success',
						title:'绑定成功~'
					})
					setTimeout(()=>{
						uni.$emit('zfb',data),
						uni.navigateBack({
							delta:1
						})
					},300)
					
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		height: 108rpx;
		border-bottom: 1rpx solid rgba(0,0,0,0.1);
		display: flex;
		align-items: center;
		padding: 26rpx;
		box-sizing: border-box;
		text{
			width: 160rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			color: rgba(0, 0, 0, 0.87);
			margin-right: 80rpx;
		}
	}
	.tip {
		padding: 26rpx;
		color: #3C8EFF;
	}
	.btn{
		width: 100%;
		height: 144rpx;
		line-height: 144rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		
		box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
		view{
			width: 698rpx;
			height: 96rpx;
			background: #3C8EFF;
			margin: 0 auto;
			color: #ffffff;
			text-align: center;
			line-height: 96rpx;
			border-radius: 8rpx;
		}
	}
</style>